<template>
  <view>
    <view class="Content">
      <view class="Box">
        <!-- <image src="/static/tab/Cha.png" class="Cha"></image> -->
        <!-- <h4 class="SelFree">发闲置</h4>
        <view class="Draft">草稿箱·4</view> -->

        <view class="Add">
          <view class="AddText" @click="chooseImage">+添加优质首图更吸引人~</view>

          <view class="image-preview" v-if="imagePath">
            <image :src="imagePath" mode="widthFix"></image>
          </view>

          <!-- <input type="file" id="fileInput" style="display: none" accept="image/* " /> -->
          <textarea type="text" class="Descri" placeholder="描述一下宝贝的品牌型号、货品来源....." />
          <view class="Direction" @click="getLocation">
            <view v-if="location" class="location-info">
              <p>纬度: {{ location.latitude }}</p>
              <p>经度: {{ location.longitude }}</p>
              <p>精度: {{ location.accuracy }}米</p>
              <p v-if="location.address">地址: {{ location.address }}</p>
            </view>

            <view v-if="errorMsg" style="color: red; margin-top: 20px;">
              {{ errorMsg }}
            </view>
            <image src="/static/tab/Dir.png" class="TagDe"></image>
            <view class="Area">五一广场</view>
            <image src="/static/tab/RighTo.png" class="Right"></image>
          </view>
        </view>

        <view class="Bottom">
          <view class="Scale">

            <h4 class="ScaText">商品规格</h4>
            <image src="/static/tab/RTow.png" class="RTow"></image>
            <view class="ScalConte">非必填，设置多个颜色、尺码等</view>

          </view>

          <view class="Scale">
            <h4 class="ScaText">价格</h4>
            <image src="/static/tab/RTow.png" class="RTow"></image>
            <input type="text" class="Money" value="0.00" />
            <view class="Money2">￥</view>
          </view>

          <view class="Scale">
            <h4 class="ScaText">发货方式</h4>
            <image src="/static/tab/RTow.png" class="RTow"></image>
            <view class="ScalConte">包邮</view>
          </view>
        </view>
      </view>
    </view>
    <h4 class="Pub">发布</h4>
  </view>
</template>

<script>

export default {
  data() {
    return {
      imagePath: '', // 存储选择的图片路径
      location: null,
      errorMsg: ''
    };
  },
  methods: {
    chooseImage() {
      // 调用uni.chooseImage API选择图片
      uni.chooseImage({
        count: 1, // 最多选择1张图片
        sizeType: ['compressed'], // 压缩图
        sourceType: ['album'], // 从相册选择
        success: (res) => {
          // 选择成功回调
          this.imagePath = res.tempFilePaths[0];
          uni.showToast({
            title: '选择成功',
            icon: 'success'
          });
        },
        fail: (err) => {
          // 选择失败回调
          console.log('选择图片失败:', err);
          uni.showToast({
            title: '选择失败',
            icon: 'none'
          });
        }
      });
    }

  },
  async getLocation() {
    this.errorMsg = '';

    try {
      // 检查权限状态
      const settingRes = await uni.getSetting();
      if (!settingRes.authSetting['scope.userLocation']) {
        // 请求权限
        const authRes = await uni.authorize({
          scope: 'scope.userLocation'
        });
      }

      // 获取当前位置
      const locationRes = await uni.getLocation({
        type: 'wgs84',
        altitude: true,
        isHighAccuracy: true
      });

      this.location = {
        latitude: locationRes.latitude,
        longitude: locationRes.longitude,
        accuracy: locationRes.accuracy
      };

      // 尝试获取逆地理编码（实际项目中可能需要调用第三方API）
      try {
        // 这里只是示例，微信小程序中可以使用wx.chooseLocation或第三方服务
        // 实际项目中您可能需要使用地图服务商的逆地理编码API
        this.location.address = "位置获取成功，详细地址需调用地图API解析";
      } catch (e) {
        console.log('逆地理编码失败', e);
      }

    } catch (error) {
      console.error('获取位置失败', error);
      if (error.errMsg.includes('auth deny') || error.errMsg.includes('authorize')) {
        this.errorMsg = '您已拒绝位置权限，请打开设置允许使用地理位置';
        // 引导用户打开设置
        uni.showModal({
          title: '提示',
          content: '需要您的地理位置权限，是否去设置打开？',
          success: (res) => {
            if (res.confirm) {
              uni.openSetting();
            }
          }
        });
      } else {
        this.errorMsg = '获取位置失败: ' + error.errMsg;
      }
    }
  }

};
</script>
<style scoped>
.RTow {
  width: 20upx;
  height: 20upx;
  float: right;
  position: relative;
  margin-right: 20upx;
  transform: translateY(10upx);
}

.ScalConte {
  color: #a4a4a4;
  float: right;
  font-size: 25upx;
}

.Money2 {
  color: #f84949;
  float: right;
  font-size: 30upx;
  font-weight: 600;
  width: 80upx;
  position: relative;
  transform: translateY(-6upx) translateX(60upx);
}

.Money {
  color: #f84949;
  float: right;
  font-size: 30upx;
  font-weight: 600;
  width: 80upx;
  position: relative;
  transform: translateY(-6upx) translateX(16upx);
}

.ScaText {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  direction: none;
}

.Scale2 {
  border-bottom: 2upx solid #f5f5f5;
  width: 670upx;
  height: 120upx;
}

.Scale {
  border-bottom: 2upx solid #f5f5f5;
  width: 670upx;
  height: 120upx;
  padding-left: 10upx;
  box-sizing: border-box;
  margin: 0 auto;
}

.Bottom {
  height: 365upx;
  border-radius: 30upx;
  background: #fff;
  margin-top: 20upx;
}

.Area {
  color: #a9a9a9;
  font-size: 30upx;
  text-align: center;
  position: relative;
  transform: translateY(5upx) translateX(-15upx);
}

.Right {
  float: right;
  height: 20upx;
  width: 20upx;
  position: relative;
  transform: translateY(-25upx) translateX(-10upx);
}

.TagDe {
  width: 40upx;
  height: 40upx;
  float: left;
  position: relative;
  transform: translateY(8upx) translateX(10upx);
}

.Direction {
  width: 210upx;
  height: 60upx;
  background: #fafafa;
  border-radius: 30upx;
  margin-left: 30upx;
  font-size: 25upx;
}

.Descri {
  color: #939191;
  font-size: 30upx;
  margin-left: 40upx;
  position: relative;
  /* transform: translateY(70upx); */
  height: 240upx;
  margin-top: 30upx;
  padding: 20rpx 0;
  box-sizing: border-box;
}

.AddText {
  background: #f5f5f5;
  height: 150upx;
  width: 150upx;
  border-radius: 20upx;
  font-size: 30upx;
  color: #a0a0a0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50upx;
  margin-left: 40upx;
  position: relative;
}

.Add {
  background: #fff;
  border-radius: 30upx;
  margin-top: 20upx;
  padding-top: 40upx;
  position: relative;
  padding-bottom: 30upx;
}

.Pub {
  width: 720upx;
  height: 80upx;
  line-height: 80upx;
  background: #000;
  border-radius: 10upx;
  text-align: center;
  position: relative;
  float: right;
  color: #fff;
  bottom: 50upx;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
}

.Draft {
  font-size: 30upx;
  display: inline-block;
  position: relative;

  transform: translateY(-10upx) translateX(240upx);
}

.SelFree {
  font-size: 35upx;
  margin-left: 20upx;
  display: inline-block;
  position: relative;
  transform: translateY(-10upx);
}

.Cha {
  width: 50upx;
  height: 50upx;
  display: inline-block;
}

.Box {
  width: 700upx;
  /* overflow: hidden; */
  margin-top: 12upx;
}

.Content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 500upx;
  box-sizing: border-box;
  background: #eee;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>
